<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script>
export default {
    data() {
        const gridOptions = {
            border: true,
            showOverflow: true,
            columns: [
                { field: 'checkbox', type: 'checkbox', width: 50 },
                { type: 'seq', width: 70 },
                { field: 'name', title: 'Name' },
                { field: 'nickname', title: 'Nickname' },
                { field: 'age', title: 'Age' },
                { field: 'role', title: 'Role' },
                { field: 'address', title: 'Address' }
            ],
            data: [
                { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },
                { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
                { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
                { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'Shenzhen' },
                { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' }
            ],
            menuConfig: {
                header: {
                    options: [
                        [
                            { code: 'COPY_TITLE', name: '复制列标题' },
                            { code: 'HIDDEN_COLUMN', name: '隐藏列' },
                            { code: 'RESET_COLUMN', name: '重置个性化列' }
                        ]
                    ]
                }
            }
        };
        return {
            gridOptions
        };
    }
};
</script>
